.weather-metrics {
  background: #000000;
  padding-top: 15px;
  // 指标标签页容器
  .title-wrap{
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px 8px;
    .tab-selector {
      display: flex;
      justify-content: left;
      .tab-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 105px;
        height: 30px;
        border: 1px solid #3A4E74;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
      }
      .tab-item:first-child{
        border-radius: 4px 0 0 4px;
        border-right: none;
      }
      .tab-item:last-child{
        border-radius: 0 4px 4px 0;
        border-left: none;
      }
      .isActive{
        color: rgba(255,255,255,1);
        border: 1px solid #43c3f5 !important;
        background: linear-gradient(to bottom, rgba(67,195,245, 0) 20%, rgba(67,195,245, 1));
      }
      .unActive{
        border: 1px solid #3A4E74 !important;
        background: rgba(5, 18, 34, 0.20);
        color: rgba(255,255,255,0.9);
      }
    }
    // 操作图标
    .action-icon {
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: translateY(-50%) scale(1.1);
        filter: brightness(1.2);
      }
      &:active {
        transform: translateY(-50%) scale(1.05);
      }
    }
  }
  .chart-area{
    width: 100%;
    height: calc(100% - 40px);
  }

  // 悬停效果
  &:hover {
    .metric-tab.active {
      filter: brightness(1.05);
    }
  }

  // 主题样式
  &.dark {
    // 默认深色主题
  }

  &.light {
    .metric-tab {
      &.active .tab-text {
        color: rgba(0, 0, 0, 0.9) !important;
      }

      &.inactive {
        background-color: rgba(240, 240, 240, 0.9) !important;
        border-color: #B0B0B0 !important;

        .tab-text {
          color: rgba(0, 0, 0, 0.7) !important;
        }

        &:hover {
          background-color: rgba(220, 220, 220, 0.9) !important;
          border-color: #909090 !important;

          .tab-text {
            color: rgba(0, 0, 0, 0.9) !important;
          }
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .metrics-tabs {
      .metric-tab {
        width: 90px;
        height: 28px;

        .tab-text {
          font-size: 12px;
          padding: 0 2px;
        }
      }
    }

    .action-icon {
      width: 20px;
      height: 20px;
      right: -2px;
    }
  }

  @media (max-width: 480px) {
    .metrics-tabs {
      .metric-tab {
        width: 75px;
        height: 24px;

        .tab-text {
          font-size: 10px;
          padding: 0 1px;
        }
      }
    }

    .action-icon {
      width: 18px;
      height: 18px;
      right: 0;
    }
  }

  // 焦点可访问性
  &:focus-within {
    outline: 2px solid rgba(58, 78, 116, 0.5);
    outline-offset: 2px;
  }

  .metric-tab:focus,
  .action-icon:focus {
    outline: 2px solid rgba(58, 78, 116, 0.8);
    outline-offset: 2px;
  }

  // 高对比度模式
  @media (prefers-contrast: high) {
    .metric-tab {
      border-width: 2px !important;

      .tab-text {
        font-weight: bold !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
      }

      &.inactive {
        background-color: rgba(5, 18, 34, 0.8) !important;
      }
    }

    .action-icon {
      filter: contrast(1.5) !important;
    }
  }

  // 减少动画
  @media (prefers-reduced-motion: reduce) {
    .metric-tab,
    .action-icon,
    .tab-text {
      transition: none !important;
      transform: none !important;
    }

    .metric-tab:hover,
    .action-icon:hover {
      transform: none !important;
    }

    .action-icon {
      transform: translateY(-50%) !important;
    }

    .action-icon:hover {
      transform: translateY(-50%) !important;
    }
  }

  // 加载状态
  &.loading {
    opacity: 0.7;
    pointer-events: none;

    .metric-tab,
    .action-icon {
      animation: pulse 1.5s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #3A4E74;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 10;
    }
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.6;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  // 错误状态
  &.error {
    .metric-tab,
    .action-icon {
      filter: grayscale(1) opacity(0.5);
    }

    &::before {
      content: '指标数据异常';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 0, 0, 0.9);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      z-index: 15;
    }
  }

  // 激活动画
  &.switching {
    .metric-tab.active {
      animation: tabActivate 0.5s ease-out;
    }
  }

  @keyframes tabActivate {
    0% {
      transform: scale(0.95);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  // 数据更新状态
  &.updating {
    .metric-tab.active .tab-text {
      animation: textUpdate 0.8s ease-in-out;
    }
  }

  @keyframes textUpdate {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
      filter: brightness(1.3);
    }
  }

  // 禁用状态
  &.disabled {
    pointer-events: none;
    opacity: 0.5;

    .metric-tab,
    .action-icon {
      filter: grayscale(1);
      cursor: not-allowed;
    }
  }

  // 选中状态特效
  &.enhanced {
    .metric-tab.active {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, #3A4E74, transparent, #3A4E74);
        border-radius: 6px;
        z-index: -1;
        animation: borderGlow 2s ease-in-out infinite;
      }
    }

    .action-icon {
      animation: iconPulse 2s ease-in-out infinite;
    }
  }

  @keyframes borderGlow {
    0%, 100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes iconPulse {
    0%, 100% {
      transform: translateY(-50%) scale(1);
    }
    50% {
      transform: translateY(-50%) scale(1.1);
    }
  }
}
